<template>
  <div>
    <el-card>
      <div v-if="props.title" class="card-header">
        <h4>
          <strong>{{ props.title }}</strong>
        </h4>
      </div>
      <div class="card-body">
        <el-table v-loading="loading" :data="bugList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="缺陷编号"
            width="180"
            align="center"
            prop="number"
            sortable
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <router-link
                :to="'/tms/bug-info/index/' + scope.row.id"
                class="link-type"
              >
                <span>{{ scope.row.number }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            label="优先级"
            width="100"
            align="center"
            prop="priority"
            sortable
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <y-dict-tag
                :options="sys_priority_level"
                :value="scope.row.priority"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="严重性"
            width="100"
            align="center"
            prop="gravity"
            sortable
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <y-dict-tag
                :options="sys_gravity_level"
                :value="scope.row.gravity"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="缺陷名称"
            width="300"
            align="center"
            prop="name"
            sortable
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="所属产品"
            width="100"
            align="center"
            prop="product.label"
            :show-overflow-tooltip="true"
            sortable
          />
          <el-table-column
            label="所属模块"
            width="100"
            align="center"
            prop="module.label"
            :show-overflow-tooltip="true"
            sortable
          />
          <el-table-column
            label="缺陷类型"
            width="100"
            align="center"
            prop="type"
            :show-overflow-tooltip="true"
            sortable
          >
            <template #default="scope">
              <y-dict-tag :options="tms_bug_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column
            label="是否线上问题"
            width="200"
            align="center"
            prop="is_online"
            :show-overflow-tooltip="true"
            sortable
          >
            <template #default="scope">
              <y-dict-tag :options="sys_yes_no" :value="scope.row.is_online" />
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="100"
            align="center"
            prop="status"
            sortable
          >
            <template #default="scope">
              <y-dict-tag
                :options="sys_enable_disable"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="创建人"
            width="100"
            align="center"
            prop="creator_name"
            sortable
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="create_time"
            width="160"
            sortable
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.create_time) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!--列表分页-->
        <y-pagination
          class="card-pagination"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup name="BugsCard">
import { listBug } from "@/api/tms/bug";

const { proxy } = getCurrentInstance();
const {
  sys_enable_disable,
  sys_priority_level,
  sys_gravity_level,
  tms_bug_type,
  sys_yes_no,
} = proxy.useDict(
  "sys_enable_disable",
  "sys_priority_level",
  "sys_gravity_level",
  "tms_bug_type",
  "sys_yes_no"
);

const total = ref(0);
const loading = ref(false);
const bugList = ref([]);

const props = defineProps({
  title: {
    type: String,
    default: "缺陷信息",
  },
  version: {
    type: String,
    default: undefined,
  },
  module: {
    type: String,
    default: undefined,
  },
});

const queryParams = reactive({
  version: props.version,
  module: props.module,
  page: 1,
  limit: 10,
});

/** 监控Props变化，并更新查询参数 */
watch(
  [() => props.module, () => props.version],
  ([newModule, newVersion], [oldModule, oldVersion]) => {
    if (newModule !== oldModule || newVersion !== oldVersion) {
      queryParams.module = newModule;
      queryParams.version = newVersion;
      getList();
    }
  },
  { immediate: true }
);

/** 查询列表 */
async function getList() {
  loading.value = true;
  try {
    const response = await listBug(queryParams);
    bugList.value = response.data;
    total.value = response.total;
  } catch (error) {
    console.error("Failed to fetch bugs:", error);
  } finally {
    loading.value = false;
  }
}
</script>
